<template>
	<view class="zone">
		<Header title="记录" :headtype="3"></Header>
		<view class="main">
			<!-- tab部分 -->
			<view class="tab">
				<view v-for="(item,index) in tablist" :key="index" :class="[stat == item.id?'active':'']"
					@click="tabchange(item.id)">{{item.name}}</view>
			</view>

			<view class="box">
				<view class="explain">
					<text>时间</text>
					<text>关卡</text>
					<text>下注砖块数</text>
					<text>赢取</text>
				</view>
				<scroll-view scroll-y class="scrollbox">
					<view class="list">
						<view class="item">
							<text class="time">2023-07-26 13:07:20</text>
							<text>2</text>
							<text>2</text>
							<view class="rightbox">
								<p>
									<image src="http://img.cpgm.cc/panda/static/monkey/sj.png" mode="widthFix" />
									<text>x100</text>
								</p>
								<p>
									<image src="http://img.cpgm.cc/panda/static/monkey/jq.png" mode="widthFix" />
									<text>x100</text>
								</p>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tablist: [{
						id: 1,
						name: '全部'
					},
					{
						id: 2,
						name: '中大奖'
					},
					{
						id: 3,
						name: '中小奖'
					},
					{
						id: 4,
						name: '未中奖'
					},
				],
				stat: 1,
			};
		},
		methods: {
			// 我的背包切换
			tabchange(id) {
				this.stat = id
			},
		},
	}
</script>

<style lang="less">
.zone {
	background: url('http://img.cpgm.cc/panda/static/monkey/bg.png') no-repeat;
	background-size: 100% 100%;
	min-height: 100vh;
}

.main {
	padding: 10px;
}

// tab导航
.tab {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-radius: 5px;
	overflow: hidden;
	border-radius: 7px;

	view {
		width: 23%;
		height: 38px;
		text-align: center;
		line-height: 38px;
		background: #FCF4FC;
		border-radius: 7px;
		color: #333333;
		font-size: 13px;
		border-radius: 7px;
	}
}

.active {
	color: #000000 !important;
	font-weight: 600;
	background: linear-gradient(180deg, #FFF9BE, #FAFAE1) !important;
}


.box {
	background: linear-gradient(180deg, rgba(251, 244, 238, 0.51), rgba(251, 236, 250, 0.51), rgba(251, 236, 250, 0.51), rgba(251, 236, 250, 0.51));
	margin-top: 10px;
	border-radius: 10px;
	padding: 10px;
	box-sizing: border-box;
}

.explain {
	padding: 0 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;

	text {
		color: #333333;
		font-size: 13px;
	}
	text:nth-child(2) {
		margin-left: 10%;
	}
}

.scrollbox {
	height: calc(100vh - 178px);
	margin-top: 10px;
}

.item {
	background: linear-gradient(180deg, #FFFCF9, #FCF4FC);
	border-radius: 7px;
	padding: 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;

	.time {
		display: block;
		width: 80px;
	}
}


.rightbox {
	display: flex;
	flex-direction: column;

	p {
		display: flex;
		align-items: center;

		image {
			width: 20px;
			margin-right: 2px;
		}
		text {
			color: #000;
			font-size: 14px;
		}
	}
}



</style>
